<template>
  <div class="goodsinfo">
    <van-nav-bar
     
    >
      <template #title> {{ obj.proname }} </template>
      <template #left> &lt; </template>
      <template #right>
        <div class="menu">
          <span @click="showMenu">...</span>
          <van-popover />
        </div>
      </template>
    </van-nav-bar>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        class="lunbo"
        v-for="item in goods"
        :key="item"
      >
        <img
          :src="item"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <div class="bottom">
      <span class="bottom-top">{{ goodsInfo[0].category }}</span>
      <van-panel class="bott0m-center" :title="goodsInfo[0].proname">
        <span class="bottom-end">{{ goodsInfo[0].originprice + '元' }}</span>
      </van-panel>
    </div>
    <van-goods-action>
      <van-goods-action-icon
        icon="chat-o"
        text="客服"
        dot
      />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        badge="5"
      />
      <van-goods-action-icon
        icon="shop-o"
        text="店铺"
        badge="12"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
      />
    </van-goods-action>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goods: [],
      goodsInfo: [],
    };
  },
  created() {
    this.goodsinfo();
  },
  methods: {
    async goodsinfo() {
      const res = await this.$http.goodsInfo();
      const arr = res.data.data;
      this.goodsInfo.push(arr);
      this.goods.push(arr.img1, arr.img2, arr.img3, arr.img4);

      console.log(this.goods);
      console.log(this.goodsInfo);
    },
  },
};
</script>

<style lang="scss" scoped>
.goodsinfo {
  .lunbo {
    img{
      height: 400px;
    }
  }
  .bottom {
    .bottom-top {
      display: block;
      width: 35px;
      height: 20px;
      background: red;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      border-radius: 8px;
      margin-left: 10px;
      font-weight: 600;
    }
    .bott0m-center{
      font-weight: 600;
      text-indent: 20px;
    }
    .bottom-end{
      color: red;
      font-size: 30px;
    }
  }
}
</style>
